//条件渲染 类似于 v-if v-show react原生语法就是if else
// {/* 条件渲染的写法有 逻辑中断 和 三元表达式  或者普通函数if--else结构 */}
const flag=false
const loading =false
const MyHeader = () => {
  if (flag) {
    return (<h1>我是头部--真值</h1>)
  }
  // return(<h1>我是头部--假值</h1>)
  return null //表示页面没有结构可以渲染，return后面一定要写值，如果不写就默认undefined
}

// 箭头函数，如果返回值只有一段代码，并且是return语句，那么就可以省略return和大括号
// const fn3 = () => ({ name: '鲁班'})
// fn3()



function App() {
  const fn = (e) => {
    console.log("reactr定义函数",e);}

  const fn2 = (e) => {
    console.log("fn2", e)
  }
  const fn3=(a,b) => {
    console.log("fn3",a,b)
  }
  return (
    <div>
      {/* 条件渲染的写法有 逻辑中断 和 三元表达式  或者普通函数if--else结构 */}
      {MyHeader()}
      {loading ? <h1>加载完成</h1> : <h1>加载中。。。</h1>}
      {!flag&&!loading&&<h1>加载中flag</h1>}
      {/* 事件处理
 vue   <div @click="fn"></div>  <div v-on:click="fn"></div>
 react 是 on + 事件名 */}
      <button onClick={fn}>测试事件</button>
      {/* <button onClick={fn2(2)}>测试事件传参</button> */}
      <button onClick={() =>fn2(1)}>测试事件传参</button>
      {/* 下面写法类似于vue里面 $event传递的内置事件对象 */}
      <button onClick={(e) => fn3(e,'test')}>自定义参数与内置参传递</button>
    </div>
  )
}

export default App